<template>
	<scroll-view @scrolltolower="handleToLower" class="album" scroll-y>
		<!-- 轮播图 swiper默认高度150px-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="(item,i) in banner" :key="i">
				<image mode="widthFix" :src="item.thumb"></image>
			</swiper-item>
		</swiper>
		<view class="album_list">
			<navigator class="album_item" v-for="(item,i) in album" :key="i" :url="'/pages/album/album?id='+item.id">
				<view class="album_image">
					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="album_desc">
					<view class="album_title">{{item.name}}</view>
					<view class="album_text">{{item.desc}}</view>
					<view class="btn">
						<text class="album_bnt">
							+ 关注
						</text>
						
					</view>
				</view>
			</navigator>
		</view>
	</scroll-view>
</template>

<script>
//引入goDetail 组件
import goDetail from '@/components/goDetail.vue';
	export default {
		components: {
			goDetail
		},
		data() {
			return {
				params: {
					limit: 30,
					order: 'new',
					skip: 0
				},
				banner: [],
				album: [],
				hasMore: true
			}
		},
		mounted() {
			this.getDataList()
		},
		methods: {
			async getDataList(){
				const res = await this.request({
					url:'http://157.122.54.189:9088/image/v1/wallpaper/album',
					data: this.params
				})
				
			if(this.banner.length === 0){
				this.banner = res.data.res.banner;
			}
			this.album = res.data.res.album
			if(this.album.length === 0) {
				this.hasMore = false;
				uni.showToast({
					title: '没有更多数据了',
					icon: "none"
				})
				return
			}
			
			
		},
		handleToLower(){
			this.params.skip += this.params.limit;
			if(this.hasMore){
				this.getDataList();
			}else {
				uni.showToast({
					title: '没有数据了',
					icon: 'none'
				})
			}
		}
		}
	}
</script>

<style lang="scss" scoped>
	 
 .album {
	 height: calc(100vh - 36px);
	 swiper {
		 height: calc(750rpx / 2.3);
		 image {
			 height: 100%;
		 }
	 }
 }
	 
 .album_list {
	 padding: 10rpx;
 }
 .album_item {
	 padding: 15rpx 0;
	 display: flex;
	 border-bottom: 1rpx solid #CCCCCC;
	 .album_image {
		 flex: 1;
		 image {
			 height: 200rpx;
			 width: 200rpx;
		 }
	 }
	 .album_desc {
		 flex: 2;
		 padding: 0 10rpx;
		 overflow: hidden;
		 .album_title {
			 font-size: 30rpx;
			 color: black;
			 
		 }
		 .album_text {
			 font-size: 24rpx;
			 padding: 10rpx 0;
			 
			 text-overflow: ellipsis;
			 overflow: hidden;
			 white-space: nowrap;
		 }
		 .album_bnt {
			 border: 1rpx solid #be3339;
			 padding: 2rpx 5rpx;
			 color: #be3339;
			 border-radius: 2%;
		 }
	 }
 }
.btn {
	padding: 10rpx 0;
	display: flex;
	justify-content: flex-end;
}
</style>
